<template>
  <view>
    <c-navBar title="教练管理首页"></c-navBar>
  </view>

  <view class="nav-list">
    <view
      @click="goto(nav.path)"
      class="nav-item flex flex-a flex-sb"
      v-for="nav in navs"
      :key="nav.id"
    >
      <view class="flex flex-a">
        <image
          style="width: 60rpx; height: 60rpx"
          :src="nav.icon"
          mode="scaleToFill"
        />
        <!-- <van-icon :name="nav.icon" size="20px" color="#000" /> -->
        <view class="title">
          {{ nav.label }}
        </view>
      </view>
      <van-icon name="arrow" />
    </view>
  </view>
</template>

<script setup>
import nav1 from "@/static/svgIcon/account.svg"
import nav2 from "@/static/svgIcon/classMana.svg"
import nav3 from "@/static/svgIcon/classTimeMana.svg"
const navs = [
  {
    id: 0,
    label: "教练管理",
    icon: nav1,
    path: "/pages/coachManagement/coachManagement"
  },
  {
    id: 1,
    label: "排课管理",
    icon: nav2,
    path: "/pages/coachManagement/scheduling"
  },
  {
    id: 2,
    label: "教练课时统计",
    icon: nav3,
    path: "/pages/coachManagement/classStatistics"
  }
]
const goto = (url) => {
  uni.navigateTo({
    url
  })
}
</script>

<style lang="scss" scoped>
.nav-list {
  margin-top: 62rpx;
}

.nav-item {
  border-radius: 10px;
  padding: 42rpx 48rpx 42rpx 114rpx;
  border: 1px solid rgba(236, 236, 236, 1);
  margin: 28rpx 80rpx;

  .title {
    font-size: 18px;
    color: rgba(0, 0, 0, 1);
    margin-left: 40rpx;
    font-weight: 500;
  }
}
</style>
